<template>
    <input type="text" placeholder="请输入待办事项..." class="thing" v-model="newTodo" @keyup.enter="handleAdd">
    <button class="add" @click="handleAdd">添加</button>
</template>

<script setup>
import { ref } from 'vue';
import { nanoid } from 'nanoid';
// 使用 ref 创建响应式引用
const newTodo = ref('')

// 定义接收的 props 
const props = defineProps({
  add: {
    type: Function,
    required: true,
  },
})

// 定义添加待办事项的方法
const handleAdd = () => {
  // 校验数据
  if (!newTodo.value.trim()) return
  
  const item = {id:nanoid(), value: newTodo.value, check: false };
  // 调用父组件传入的 addTodo 函数来添加待办事项
  props.add(item)

  // 清空输入框
  newTodo.value = ''

}
</script>